import { Form, Input, InputNumber, message, Upload, Button } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import { addMallInfo } from '../../api/mall/index'
import { useNavigate } from 'react-router-dom';
import './mallAdd.css'
const getBase64 = (img, callback) => {
    const reader = new FileReader();
    console.log(reader,'reader');
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
};
//   图片上传前对图片的校验
const beforeUpload = (file) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};

function MallAdd() {
    const [form] = Form.useForm();
    const navigate = useNavigate()


    const [loading, setLoading] = useState(false);
    // 
    const [imageUrl, setImageUrl] = useState();
    const handleChange = (info) => {
        console.log(info,'info');
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                // 替换图片的路径---通过base64的方式替换图片路径
                setImageUrl(url);
            });
        }
    };
    const uploadButton = (
        <button
            style={{
                border: 0,
                background: 'none',
            }}
            type="button"
        >
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                Upload
            </div>
        </button>
    );

    function test(){
        form.validateFields().then(val=>{
            val.mallPic = val.mallPic.file.response.data
            console.log(val,'val22');
            addMallInfo(val).then((res)=>{
                console.log(res,'resss');
                if(res.code==200){
                    message.success('添加成功')
                    form.resetFields()
                    setTimeout(()=>{
                        navigate('/mall')
                    },1000)
                }else{
                    message.error('添加失败')
                }
            })
        })
    }
    return (
        <div className='mallAdd'>
            <h2>添加商品</h2>
            <Form
                form={form}
                className='addForm'
            >
                <Form.Item name='mallName' label='商品名称'>
                    <Input></Input>
                </Form.Item>
                <Form.Item name='mallCost' label='商品成本'>
                    <InputNumber></InputNumber>
                </Form.Item>
                <Form.Item name='mallCategory' label='商品类别'>
                    <Input></Input>
                </Form.Item>
                <Form.Item name='mallVersion' label='商品型号'>
                    <Input></Input>
                </Form.Item>
                <Form.Item name='mallParam' label='商品参数'>
                    <Input></Input>
                </Form.Item>
                <Form.Item label='商品图片' name='mallPic'>
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="http://localhost:8090/picServer/upload"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? (
                            <img
                                src={imageUrl}
                                alt="avatar"
                                style={{
                                    width: '100%',
                                }}
                            />
                        ) : (
                            uploadButton
                        )}
                    </Upload>
                </Form.Item>
            </Form>
            <Button type='primary' onClick={()=>{
                test()
            }}>添加商品</Button>
        </div>
    )

}

export default MallAdd